<template>
  <div class="active-defense">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">主动防御</span>
        <div class="header-operations">
          <el-input
            v-model="searchQuery"
            placeholder="搜索域名/IP/请求路径"
            prefix-icon="el-icon-search"
            clearable
            size="small"
            style="width: 250px;"
          >
          </el-input>
          <el-button-group class="action-buttons">
            <el-button type="primary" size="small" icon="el-icon-refresh" @click="refreshData">刷新</el-button>
            <el-button type="success" size="small" icon="el-icon-download" @click="exportData">导出</el-button>
          </el-button-group>
        </div>
      </div>

      <!-- Statistics Cards -->
      <el-row :gutter="20" class="statistics-row">
        <el-col :span="6">
          <el-card shadow="hover" class="statistic-card">
            <div class="statistic-content">
              <div class="statistic-icon">
                <i class="el-icon-warning-outline"></i>
              </div>
              <div class="statistic-info">
                <div class="statistic-label">总攻击次数</div>
                <div class="statistic-value">{{ statistics.totalAttacks }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="statistic-card success">
            <div class="statistic-content">
              <div class="statistic-icon">
                <i class="el-icon-success"></i>
              </div>
              <div class="statistic-info">
                <div class="statistic-label">拦截成功</div>
                <div class="statistic-value">{{ statistics.blockedAttacks }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="statistic-card warning">
            <div class="statistic-content">
              <div class="statistic-icon">
                <i class="el-icon-warning"></i>
              </div>
              <div class="statistic-info">
                <div class="statistic-label">攻击IP数</div>
                <div class="statistic-value">{{ statistics.uniqueAttackers }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="statistic-card info">
            <div class="statistic-content">
              <div class="statistic-icon">
                <i class="el-icon-connection"></i>
              </div>
              <div class="statistic-info">
                <div class="statistic-label">受攻击服务器</div>
                <div class="statistic-value">{{ statistics.affectedServers }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- Main Table -->
      <el-table
        :data="filteredTableData"
        style="width: 100%"
        v-loading="loading"
        border
        size="small"
      >
        <el-table-column
          prop="hostname"
          label="域名/主机名"
          min-width="180"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="serverIp"
          label="影响服务器"
          min-width="140"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="port"
          label="端口"
          width="100">
        </el-table-column>

        <el-table-column
          prop="attackIp"
          label="攻击IP"
          min-width="140"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="method"
          label="请求方式"
          width="100">
        </el-table-column>

        <el-table-column
          prop="path"
          label="请求路径"
          min-width="300"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="defenseLevel"
          label="防御等级"
          width="100">
          <template slot-scope="scope">
            <el-tag :type="getDefenseLevelType(scope.row.defenseLevel)" size="small">
              {{ scope.row.defenseLevel }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="result"
          label="防御结果"
          width="100">
          <template slot-scope="scope">
            <el-tag type="success" size="small">{{ scope.row.result }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="timestamp"
          label="发生时间"
          width="160"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          label="操作"
          width="80"
          fixed="right">
          <template slot-scope="scope">
            <el-button
              @click="viewDetails(scope.row)"
              type="text"
              size="small">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- Pagination -->
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- Details Dialog -->
    <el-dialog
      title="攻击详情"
      :visible.sync="detailsVisible"
      width="60%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="域名/主机名">{{ selectedRow.hostname }}</el-descriptions-item>
        <el-descriptions-item label="影响服务器">{{ selectedRow.serverIp }}</el-descriptions-item>
        <el-descriptions-item label="端口">{{ selectedRow.port }}</el-descriptions-item>
        <el-descriptions-item label="攻击IP">{{ selectedRow.attackIp }}</el-descriptions-item>
        <el-descriptions-item label="请求方式">{{ selectedRow.method }}</el-descriptions-item>
        <el-descriptions-item label="防御等级">
          <el-tag :type="getDefenseLevelType(selectedRow.defenseLevel)" size="small">
            {{ selectedRow.defenseLevel }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="请求路径" :span="2">{{ selectedRow.path }}</el-descriptions-item>
        <el-descriptions-item label="请求参数" :span="2">
          <pre class="request-params">{{ selectedRow.params || '无' }}</pre>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ActiveDefense',
  data() {
    return {
      searchQuery: '',
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      detailsVisible: false,
      selectedRow: {},
      statistics: {
        totalAttacks: 0,
        blockedAttacks: 0,
        uniqueAttackers: 0,
        affectedServers: 0
      },
      tableData: [
        {
          hostname: '204071.a4.q2msq.com',
          serverIp: '39.101.204.71',
          port: '48200',
          attackIp: '120.77.82.232',
          method: 'POST',
          path: '/veeyou/m-signature/RunSignature/run/getAjaxDataSe',
          params: '{"param1": "value1", "param2": "value2"}',
          defenseLevel: '高',
          result: '拦截成功',
          timestamp: '2024-04-27 23:41:01'
        },
        {
          hostname: '223075.a2.q2msq.com',
          serverIp: '39.99.225.79',
          port: '48198',
          attackIp: '120.77.82.232',
          method: 'POST',
          path: '/veeyou/m-signature/RunSignature/run/getAjaxDataSe',
          defenseLevel: '中',
          result: '拦截成功',
          timestamp: '2024-04-27 23:41:01'
        }
        // 添加更多示例数据...
      ]
    }
  },
  computed: {
    filteredTableData() {
      if (!this.searchQuery) return this.tableData;
      const query = this.searchQuery.toLowerCase();
      return this.tableData.filter(item =>
        item.hostname.toLowerCase().includes(query) ||
        item.serverIp.includes(query) ||
        item.path.toLowerCase().includes(query)
      );
    }
  },
  methods: {
    getDefenseLevelType(level) {
      const types = {
        '高': 'danger',
        '中': 'warning',
        '低': 'info'
      };
      return types[level] || 'info';
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    viewDetails(row) {
      this.selectedRow = row;
      this.detailsVisible = true;
    },
    refreshData() {
      this.fetchData();
    },
    exportData() {
      this.$message({
        type: 'success',
        message: '正在导出数据...'
      });
    },
    updateStatistics() {
      const stats = {
        totalAttacks: this.tableData.length,
        blockedAttacks: this.tableData.filter(item => item.result === '拦截成功').length,
        uniqueAttackers: new Set(this.tableData.map(item => item.attackIp)).size,
        affectedServers: new Set(this.tableData.map(item => item.serverIp)).size
      };
      this.statistics = stats;
    },
    async fetchData() {
      this.loading = true;
      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1000));
        this.total = this.tableData.length;
        this.updateStatistics();
      } catch (error) {
        this.$message.error('获取数据失败');
      } finally {
        this.loading = false;
      }
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

<style scoped>
.active-defense {
  padding: 8px;
}

.box-card {
  margin-bottom: 8px;
}

.header-operations {
  float: right;
  display: flex;
  align-items: center;
  gap: 10px;
}

.statistics-row {
  margin-bottom: 20px;
}

.statistic-card {
  height: 100px;
}

.statistic-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.statistic-icon {
  font-size: 32px;
  margin-right: 15px;
  color: #409EFF;
}

.statistic-card.success .statistic-icon {
  color: #67C23A;
}

.statistic-card.warning .statistic-icon {
  color: #E6A23C;
}

.statistic-card.info .statistic-icon {
  color: #909399;
}

.statistic-info {
  display: flex;
  flex-direction: column;
}

.statistic-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.statistic-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.request-params {
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

@media (max-width: 768px) {
  .header-operations {
    float: none;
    margin-top: 10px;
    flex-direction: column;
  }

  .header-operations > * {
    width: 100% !important;
    margin-bottom: 10px;
  }

  .statistics-row {
    .el-col {
      margin-bottom: 10px;
    }
  }
}
</style>
